import React, { useEffect, useState } from 'react'
import { backgroundObj, } from '@/utils/utils'
import { View, Button, Input } from '@tarojs/components'
import { fetchListOrganization } from '@/server/shop'
import { wechatAuth } from "@/utils/utils";
import { fetchWechatAuth } from "@/server/login";
import { goBack, loginData } from '@/utils/utils';
import { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import Taro from '@tarojs/taro';
import './index.scss'
const SelectOrganization = (props) => {
    const [list, setList] = useState([])
    const [page, setPage] = useState({
        page: 1,
        limit: 10,
        keyword: ''
    })
    const fetchData = () => {
        fetchListOrganization(page).then(e => {
            const { organizationList = [] } = e
            setList([...list, ...organizationList])

        })
    }
    const setPageUp = () => {
        setPage({
            ...page,
            page: page.page + 1
        })
    }
    useReachBottom(() => {
        setPageUp()
    })
    useEffect(() => {
        fetchData()

    }, [page])
    const setConfig = (organizationId) => {
        wechatAuth((e) => {
            fetchWechatAuth({ code: e, organizationId }).then((val) => {
                const { userInfo = {} } = val
                Taro.setStorageSync('organizationId', organizationId)
                Taro.setStorageSync('userInfo', ({
                    ...userInfo,
                    organizationId: organizationId
                }))
                setTimeout(() => {
                    goBack()
                }, 300)
            });
        });

    };

    return <View className='SelectOrganization_box'>
        <View className='SelectOrganization_Search'>
            <View className='SelectOrganization_Search_input'>
                <View className='SelectOrganization_Search_icon'>
                </View>
                <Input onInput={(e) => {
                    setPage(() => {
                        setList([])
                        return {
                            page: 1,
                            limit: 10,
                            keyword: e.detail.value
                        }
                    })

                }} value={page.keyword} placeholder='请输入关键词' className='SelectOrganization_Search_body'></Input>
                {page.value && <View onClick={(e) => {
                    e.stopPropagation();
                    setPage(() => {
                        setList([])
                        return {
                            page: 1,
                            limit: 10,
                            keyword: ''
                        }
                    })
                }} className='SelectOrganization_Search_close'></View>}
            </View>
            <View className='SelectOrganization_Search_btn'>搜索</View>
        </View>
        <View className='SelectOrganization_liner'></View>

        {list.map(item => {
            const { organizationName, logo, id, displayName } = item
            return <View onClick={() => {
                setConfig(id)
            }} className='SelectOrganization_select_list'>
                <View style={backgroundObj(logo)} className='SelectOrganization_select_logo'></View>
                <View className='SelectOrganization_select_font'>{displayName || organizationName}</View>
                <View className='SelectOrganization_select_icon'></View>
            </View>
        })}
    </View>
}
export default SelectOrganization
